<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #canvas{display:block;margin:0 auto;width: 500px;height: 500px;border: 2rpx solid #ddd;}
  	 /*清除器样式*/
  	 #controller{margin: 0 auto;}
  	 .op_btn{float: right;margin: 20px 0 0 0;border: 2px solid #aaa;
  	 	width: 80px;height: 40px;line-height: 40px;font-size: 20px;text-align: center;
  	 	border-radius: 5px;cursor: pointer;background-color: white;
  	 	font-weight: bold;font-family:Arial;}
  	 .op_btn:hover{background: #def;}
  	 .clearfix{clear: both;}
  	 /*颜色按钮*/
  	 .color_btn{
  	 	float: left;
  	 	margin: 16px 0 0 10px;
  	 	border: 5px solid white;
  	 	width: 40px;
  	 	height: 40px;
  	 	border-radius: 5px;
  	 	cursor: pointer;
  	 }
  	 .color_btn:hover{border:5px solid violet;}
  	 /*默认边框*/
  	 .color_btn_selected{border:5px solid blueviolet;}
  	 #black_btn{background-color: black;}
  	 #blue_btn{background-color: blue;}
  	 #green_btn{background-color: green;}
  	 #red_btn{background-color: red;}
  	 #orange_btn{background-color: orange;}
  	 #yellow_btn{background-color: yellow;}
    </style>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <canvas id="canvas">
        此浏览器不支持canvas
    </canvas>
    <div id="controller">
        <div id="black_btn" class="color_btn color_btn_selected"></div>
        <div id="blue_btn" class="color_btn"></div>
        <div id="green_btn" class="color_btn"></div>
        <div id="red_btn" class="color_btn"></div>
        <div id="orange_btn" class="color_btn"></div>
        <div id="yellow_btn" class="color_btn"></div>
        <div id="clear_btn" class="op_btn">清除</div>
        <div class="clearfix"></div>
    </div>
<script>
    window.onload=function(){
	//定义画布常量宽高(如果屏幕的大小-20比650小的话则在移动端，反之在pc端)
	var canvasWidth=Math.min(650,$(window).width()-20);
	var canvasHeight=canvasWidth;
	//默认鼠标按下为false
	var isMouseDown=false;
	//上一次鼠标记录的位置
	var lastLoc={x:0,y:0}; 
	//设置当前默认颜色
	var strokeColor="black";
	//获取画布
	var canvas=document.getElementById('canvas');
	//获取画布上下文
	var context=canvas.getContext('2d');
    //设置画布大小
    canvas.width=canvasWidth;
    canvas.height=canvasHeight;

    //调用画布
 	drawGrid();

 	//动态设置 #controller宽度,让其适应手机屏幕
 	$(" #controller").css('width',canvasWidth+'px');
 	//清除画布操作
 	$('#clear_btn').click(function(){
 		//清除画布上的字体
 		context.clearRect(0,0,canvasWidth,canvasHeight);
 		//重新绘画
 		drawGrid();
 	});
 	//颜色更换
 	$('.color_btn').click(function(e){
 		//选中按钮时移除掉边框
 		$('.color_btn').removeClass('color_btn_selected');
 		//再在当前按钮添加边框
 		$(this).addClass('color_btn_selected');
 		//把当前选中的按钮颜色赋值给画笔
 		strokeColor=$(this).css('background-color');
 	});

 	//鼠标在画布按下时
 	canvas.onmousedown=function(e){
 		e.preventDefault();
 		isMouseDown=true;
 		//console.log("mouse Down!");
 		//e.clientX和e.clientY传入当前屏幕坐标
 		lastLoc=windowToCanvas(e.clientX,e.clientY);
 		//alert(loc.x+","+loc.y);
 	};
 	//鼠标在画布按下松开后
 	canvas.onmouseup=function(e){
 		e.preventDefault();
 		isMouseDown=false;
 		//console.log("mouse Up!");
 	};
 	//鼠标离开画布时
 	canvas.onmouseout=function(e){
 		e.preventDefault();
 		isMouseDown=false;
 		//console.log("mouse out!");
 	};
 	//鼠标移动在画布上时
 	canvas.onmousemove=function(e){
 		e.preventDefault();
 		if(isMouseDown){
 			//console.log("mouse move!");
 			var curLoc=windowToCanvas(e.clientX,e.clientY);

 			//draw
 			context.beginPath();
 			context.moveTo(lastLoc.x,lastLoc.y);
 			context.lineTo(curLoc.x,curLoc.y);
 			//设置画笔颜色
 			context.strokeStyle=strokeColor;
 			//设置画笔粗细
 			context.lineWidth=10;
 			//填补空白
 			context.lineCap="round";
 			//线条更加平滑
 			context.lineJoin="round";
 			//画线
 			context.stroke();
 			//当再画时，当前就是等于上一次开始的时候
 			lastLoc=curLoc;

 		}
 	};
 	
 	//*屏幕坐标与canvas坐标的转换
     function windowToCanvas(x,y){
     	//创建canvas所对应的包围盒
     	var bbox=canvas.getBoundingClientRect();
     	//返回屏幕x坐标减去bbox距离左边的间距就是canvas距离左边的位置,顶部同理左边
     	return{x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};
     };
 function drawGrid(){
 	//保存当前画布
 	context.save();
 	//设置画布颜色
	context.strokeStyle="rgb(230,11,9)";
	context.beginPath();	
	context.moveTo(3,3);
	context.lineTo(canvasWidth-3,3);
	context.lineTo(canvasWidth-3,canvasHeight-3);
	context.lineTo(3,canvasHeight-3);
	context.closePath();
    

	context.lineWidth=6;
	context.stroke();


	//四条直线
	context.beginPath();
	context.moveTo(0,0);
	context.lineTo(canvasWidth,canvasHeight);

	context.moveTo(0,canvasHeight);
	context.lineTo(canvasWidth,0);

	context.moveTo(0,canvasHeight/2);
	context.lineTo(canvasWidth,canvasHeight/2);

	context.moveTo(canvasWidth/2,0);
	context.lineTo(canvasWidth/2,canvasHeight);

	context.lineWidth=1;
	context.stroke();

	context.restore();
  }

 }
</script>
</body>
</html>